<template>
    <div class="message">
        <div class="search">
            <el-input v-model="inputUsername" placeholder="请输入名字"></el-input>
            <PCSelectDate class="expansion" v-if="!PCTableShow"></PCSelectDate>
            <PhoneSelectDate v-if="PCTableShow" />
            <el-button type="primary" @click="getInputData">搜索</el-button>
        </div>

        <el-row>
            <el-button type="primary"  @click="handleDialogVisible" size="mini">新增</el-button>
            <el-button type="danger" @click="handleDeleteBatch" size="mini">批量删除</el-button>
            <!-- 新增弹窗 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                :width="manage.width"
                >
                <!-- 内容 -->
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="点评标题">
                        <el-input v-model="form.dTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="点评父标题">
                        <el-input v-model="form.dPid"></el-input>
                    </el-form-item>
                    <el-form-item label="点评用户">
                        <el-input v-model="form.dUid"></el-input>
                    </el-form-item>
                    <el-form-item label="被点评的用户">
                        <el-input v-model="form.dTouid"></el-input>
                    </el-form-item>
                    <el-form-item label="浏览次数">
                        <el-input v-model="form.dNum"></el-input>
                    </el-form-item>
                    <el-form-item label="同意次数">
                        <el-input v-model="form.dFavorite"></el-input>
                    </el-form-item>
                    <el-form-item label="反对次数">
                        <el-input v-model="form.dDislike"></el-input>
                    </el-form-item>
                        <el-form-item label="点评图片">
                        <el-upload
                            :auto-upload="false"
                            ref="upload"
                            action="#"
                            list-type="picture-card"
                            :http-request="uploadAvatar"
                            :on-change="avatarPreview"
                            :multiple="true"
                            :file-list="viewPicture"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="点评内容">
                        <el-input type="textarea" v-model="form.dContent"></el-input>
                    </el-form-item>
                </el-form>
                
                <!-- 操作 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>

        <el-table
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            :data="userData"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border
            >
            <el-table-column type="expand" key="tableColumn" v-if="PCTableShow">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="点评 ID:">
                            <span>{{ props.row.dId }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="点评标题:">
                            <span>{{ props.row.dTitle }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="点评图片:">
                            <img style="width:100px;height:100px;" v-if="props.row.dPicture !== null && props.row.dPicture !==''" :src="props.row.dPicture" alt="用户头像">
                        </el-form-item>
                        <br>
                        <el-form-item label="点评用户:">
                            <span>{{ props.row.dUid }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="被点评的用户:">
                            <span>{{ props.row.dTouid }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="点评父标题:">
                            <span>{{ props.row.dPid }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="点评内容:">
                            <span>{{ props.row.dContent }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="浏览次数:">
                            <span>{{ props.row.dNum }}</span>
                        </el-form-item>
                        <el-form-item label="同意次数:">
                            <span>{{ props.row.dFavorite }}</span>
                        </el-form-item>
                        <el-form-item label="反对次数:">
                            <span>{{ props.row.dDislike }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间:">
                            <span>{{ props.row.dCreatetime }}</span>
                        </el-form-item>
                        <el-form-item label="更改时间:">
                            <span>{{ props.row.dUpdatetime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column width="80" show-overflow-tooltip key="tableColumnId" label="点评 ID" v-if="tableShow === false ? 0 : 1" prop="dId"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnName" label="点评标题" prop="dTitle"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnAvatar" v-if="tableShow === false ? 0 : 1" label="点评图片" >
                <template slot-scope="pc_props">
                    <span v-for="item,index in pc_props.row.dPicture" :key="index">
                        <img v-if="item !== null && item !==''" :src="item" style="width:100px;height:100px;" alt="点评图片">
                    </span>
                </template>
            </el-table-column>
            <el-table-column width="80" show-overflow-tooltip key="tableColumnUid" v-if="tableShow === false ? 0 : 1" label="点评用户" prop="dUid"></el-table-column>
            <el-table-column width="100" show-overflow-tooltip key="tableColumnTouid" v-if="tableShow === false ? 0 : 1" label="被点评用户" prop="dTouid"></el-table-column>
            <el-table-column width="100" show-overflow-tooltip key="tableColumnPid" v-if="tableShow === false ? 0 : 1" label="被点评序号" prop="dPid"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnContent" v-if="tableShow === false ? 0 : 1" label="点评内容" prop="dContent"></el-table-column>
            <el-table-column width="80" show-overflow-tooltip key="tableColumnNum" v-if="tableShow === false ? 0 : 1" label="浏览次数" prop="dNum"></el-table-column>
            <el-table-column width="80" show-overflow-tooltip key="tableColumnFavorite" v-if="tableShow === false ? 0 : 1" label="同意次数" prop="dFavorite"></el-table-column>
            <el-table-column width="80" show-overflow-tooltip key="tableColumnDislike" v-if="tableShow === false ? 0 : 1" label="反对次数" prop="dDislike"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnCreatetime" v-if="tableShow === false ? 0 : 1" label="创建时间" prop="dCreatetime"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnUpdatetime" v-if="tableShow === false ? 0 : 1" label="更改时间" prop="dUpdatetime"></el-table-column>
        

            <el-table-column label="操作" width="144">
                <template slot-scope="scope">
                    <div class="btnEditDel">
                        <el-button class="btnEdit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- <br class="btnEditDelMid" v-show="PCTableShow"> -->
                        <el-button class="btnDel" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <PCPage :pageNum="pageNum" :pageSize="pageSize" :total="total"/>
            <PhonePage :pageNum="pageNum" :pageSize="pageSize" :total="total" />
        </div>
        
    </div>
</template>


<script>
import PCSelectDate from '@/components/slot/SelectTime/PCSelectDate'
import PhoneSelectDate from '@/components/slot/SelectTime/PhoneSelectDate'
import PCPage from '@/components/slot/SelectPage/PCPage'
import PhonePage from '@/components/slot/SelectPage/PhonePage'
import HeadUpload from '@/components/slot/headUpload/'
import {mapState,mapMutations} from 'vuex'
import {getPageDiscuss,insUpdDiscuss,uploadDiscuss} from '@/api'
export default {
    name: "ManageAdmin",
    components:{
        PCSelectDate,
        PhoneSelectDate,
        PCPage,
        PhonePage,
        HeadUpload
    },
    computed:{
        ...mapState('Public',['publicWidth','manage']),
        ...mapState('TempData',['tempTableData'])
    },
    data() 
    {
        return {
            userData:[],
            PCTableShow:false,
            tableShow:false,
            inputUsername:'',

            //弹窗
            dialogVisible: false,

            //传递头像服务器地址
            action:"/bs/user/upload",

            //新增
            form: {
                dTitle: '',
                dPid: '',
                dUid: '',
                dTouid: '',
                dPicture: '',
                dContent: '',
                dNum: 0,
                dFavorite:'',
                dDislike:'',
                dViewPicture:[]
            },
            // 补助头像修改(回显)
            viewPicture:[],

            dialogImageUrl:[],
            imageUrl: "",
            fileList: [],

            //修改数据补助变量
            uFavoriteTypeString: [],
            uAuthorityString: true,
            tempAvatar:'',

            //批量删除
            delBatchData: [],

            /**
             * 查询
             */
            //分页
            pageNum: 1,
            pageSize: 5,
            total: 0,
            //时间
            previousTime: '',
            futureTime: ''
        }
    },
    watch:{
        /**
         * 改变PC和移动端的表格
         */
        publicWidth()
        {
            this.EidtWindow()
        }
    },
    created() 
    {
        // 查询数据
        this.getList()
        /**
         * 改变PC和移动端的表格
         */
        this.EidtpublicWidth(document.body.clientWidth)
        this.EidtWindow()
    },
    methods: {
        /**
         * Element-ui源代码
         */
        toggleSelection(rows) 
        {
            if (rows) 
            {
                rows.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row);
                });
            } 
            else 
            {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) 
        {
            this.multipleSelection = val;
        },
        //上传图片
        avatarPreview(file) 
        {
            //这里是实现图片的预览
            this.imageUrl = URL.createObjectURL(file.raw);
            // console.log(this.imageUrl);
        },
        uploadAvatar(data) 
        {
            //这里的data.file就是我们要上传到后台的图片文件
            this.fileList.push(data.file);
            // console.log(this.fileList);
        },
        handleRemove(file, fileList) 
        {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) 
        {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        /**
         * EidtpublicWidth:更改窗口大小
         */
        ...mapMutations('Public',['EidtpublicWidth']),

        /**
         * 改变PC和移动端的表格
         */
        EidtWindow()
        {
            if(this.publicWidth <= 540)
            {
                this.PCTableShow = true
                this.tableShow = false
            }
            else
            {
                this.PCTableShow = false
                this.tableShow = true
            }   
        },
        //弹窗
        handleDialogVisible()
        {
            this.dialogVisible = true
            this.tempAvatar = 'insert'
            if(this.tempAvatar === 'insert')
                this.form = this.$options.data().form
        },
        //获取子组件的头像
        headImgUrl(val)
        {
            this.form.uAvatar = val
            // console.log('收到的头像',val);
        },

        /**
         * 操作数据
         */
        getInputData()
        {
            this.getList()
        },
        //修改数据
        handleEdit(index, row) 
        {
            console.log('我被点击');
            this.dialogVisible = true
            if(row !== undefined)
            {
                this.tempAvatar = 'update'
                //展示原始数据
                this.form = row 
                // console.log(this.form.dPicture);
                let temp = this.form.dPicture

                //图片回显
                this.viewPicture = []  //防止多次点击数据不对
                for (let index = 0; index < temp.length; index++) 
                {
                    this.viewPicture.push({url:`${temp[index]}`})
                }
                // console.log(this.viewPicture);
                
            }
            else
            this.tempAvatar = 'insert'
            // console.log(index, row);
        },
        //调用后台删除数据
        handleDelete(index, row) 
        {
            console.log(index, row);
            delUserId(row.uId)  //调用接口删除数据
            this.getList()
        },
        //获取选择器选中的所有数据
        handleSelectionChange(val)
        {
            // 扁平化处理，将对象数组变普通数组
            this.delBatchData = val.map(v => v.uId)
        },
        //调用后台删除
        handleDeleteBatch()
        {
            let res = delUsers(this.delBatchData)
            if(res)
            {
                alert('批量删除成功')
                this.getList()
            }
            else
                alert('批量删除失败')
            
        },
        //调用后台更新
        async save()
        {
            this.dialogVisible = false
            this.$refs.upload.submit();
            const formData = new FormData();
            for (var i = 0; i < this.fileList.length; i++) 
            {
                formData.append("fileList", this.fileList[i]);
            }
            let res1 = await uploadDiscuss(formData)   //修改图片数组
            this.viewPicture = res1//赋值到form表单数据中
            this.form.dPicture = this.viewPicture.toString()
            let res = await insUpdDiscuss(this.form) //调用接口更新数据
            this.getList()
        },

        /**
         * 查询数据   || 有报红，是对象和数组类型不一致，暂时没找到问题所在，但是可以正常使用
         */
        getList(pageSize,pageNum)
        {
            //查询分页
            getPageDiscuss({
                pageNum: pageNum === undefined ? this.pageNum : pageNum,
                pageSize: pageSize === undefined ? this.pageSize : pageSize,
            }).then(res => {
                this.userData = res.records
                this.total = res.total
                this.form = res.records
                console.log(this.form);

                // 将得到的图片数据由字符串转为数组
                this.form.filter((i=>{
                    if(i.dPicture !== undefined && i.dPicture !== null && i.dPicture !== '')
                        i.dPicture = i.dPicture.split(',')
                    else
                        console.log('空');
                }))

                // console.log(this.form);

            }).catch(err =>{
                console.log(err);
            })
        },
        //被子组件调用的分页查询
        callPage(pageNum,pageSize)
        {
            this.getList(pageSize,pageNum)
        },
        //被子组件调用的时间选择
        callDate(val)
        {
            this.previousTime = val[0]
            this.futureTime = val[1]
        },
    }
}
</script>

<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
        padding: 0 5px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 1px dashed #ebebeb;
        width: 100%;
    }
    .message
    {
        .el-row
        {
            padding: 0 0 10px 0;
        }
    }
    .search
    {
        display: flex;
        padding: 0 0 10px 0;
        .el-input
        {
            width: 200px;
        }
        .expansion
        {
            margin: 0 10px;
        }
    }
    .page
    {
        padding: 10px 0;
    }


    @media all and (max-width: 540px)
    {
        .search
        {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .el-date-picker
            {
                width: 100%;
            }
            .el-input
            {
                width: 100% !important;
            }
            .el-button
            {
                width: 100%;
            }
        }
    }
</style>